<nz-spin [nzSpinning]="loading" [nzDelay]="500">
  <div nz-row>
    <div nz-col [nzSm]="6" [nzXs]="6">
      <div nz-typography nzType="secondary">{{document.pid}}</div>
      <h1 nz-typography>{{document.documentTitle}}</h1>
      <div nz-typography>{{document.productName}}</div>
      <div nz-typography nzType="secondary">{{document.createUserName}}</div>
      <div nz-typography nzType="secondary">{{document.createTime | shortTime}}</div>
      <nz-divider></nz-divider>
      <div class="project-info">
        <nz-list nzItemLayout="horizontal" [nzLoading]="loading">
          <nz-list-item *ngFor="let item of document.projects">
            <nz-list-item-meta [nzDescription]="item.pid">
              <nz-list-item-meta-title>
                {{ item.projectName }}
              </nz-list-item-meta-title>
            </nz-list-item-meta>
          </nz-list-item>
          <nz-list-empty *ngIf="!document.projects ||document.projects.length === 0"></nz-list-empty>
        </nz-list>
      </div>
    </div>
    <div nz-col [nzSm]="18" [nzXs]="18">
      <div class="document-editor">
        <div class="document-editor__editable-container">
          <div class="document-editor__editable" #editor disabled>
          </div>
        </div>
      </div>
    </div>
  </div>
</nz-spin>
